<template>
  <div class="strategy">
    <!-- <div class="banner">相关攻略</div> -->

    <div v-for="(v, i) in recomList" :key="i">
      <nuxt-link :to="{ path: '/post/postDetail?id=' + v.id }">
        <div class="main" v-if="v.images.length">
          <div class="tupian">
            <img :src="v.images[0]" alt="" />
          </div>
          <div class="post-text">
            <div class="title">{{ v.title }}</div>
            <p>
              {{ moment(v.updated_at).format("YYYY-MM-DD HH:mm") }} 阅读{{
                v.watch
              }}
            </p>
          </div>
        </div>

        <div class="main2" v-else>
          <div class="post-text2">
            <div class="title">{{ v.title }}</div>
            <p>
              {{ moment(v.updated_at).format("YYYY-MM-DD HH:mm") }} 阅读{{
                v.watch ? v.watch : 0
              }}
            </p>
          </div>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
//时间插件
import moment from "moment";
export default {
  data() {
    return {
      moment,
      recomList: [],
      // images: [],
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/recommend",
      method: "get",
      //   id: 1547,
    }).then((res) => {
      //   console.log(res);
      this.recomList = res.data.data;

      console.log(res);
      // this.images = res.data.data.map((v) => {
      //   if (v.images.length == 0) {
      //     return "";
      //   } else {
      //     return v.images;
      //   }
      // });
      // console.log(res.data.data.images);
      // console.log(res.data.data.title);
      //   this.recomList = res.data.data.map((v) => {
      //     return { ...v };
      //   });
      console.log(this.recomList);
      //   console.log(res.data);
      //   console.log(res.data.data);
    });
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.strategy {
  width: 280px;
  .banner {
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .main,
  .main2 {
    overflow: hidden;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
    .tupian {
      float: left;
      width: 100px;
      height: 80px;
      // border: 1px solid yellow;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .post-text {
      position: relative;
      float: right;
      width: 170px;
      height: 80px;
      .title {
        font-size: 16px;
      }
      p {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 12px;
        color: #cccccc;
      }
    }
    .post-text2 {
      height: 80px;
      position: relative;
      p {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 12px;
        color: #cccccc;
      }
    }
  }
}
</style>>